<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态vue使用</title>
    <!--引入css-->
    <link rel="stylesheet" href="element-ui@2.15.13/css/index.css">
    <link rel="stylesheet" href="warehouse.css">
</head>
<body>
<div id="app">
    <el-container class="container">
        <el-header class="header">
            <el-button-group>
                <el-button type="primary" icon="el-icon-plus" @click="onClickAdd"></el-button>
                <el-button type="primary" icon="el-icon-delete" @click="onClickDelete"></el-button>
            </el-button-group>
        </el-header>
        <el-main>
            <el-table
                    :data="list"
                    border
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange">>
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
                    <template slot-scope="{row}">
                        <span>{{ row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" prop="name" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="性别" prop="gender" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.gender | genderFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.createTime }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer class="footer">
            <el-pagination
                    v-show="pagination.total>0"
                    :current-page.sync="pagination.page"
                    :page-size.sync="pagination.pageSize"
                    :page-sizes="pagination.pageSizes"
                    :total="pagination.total"
                    background
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-footer>
    </el-container>

    <!-- 设置对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" :rules="rules" ref="userAddForm">
            <el-form-item label="姓名" label-width="80px" prop="name">
                <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="80px" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="未知" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onClickAddSubmit">确 定</el-button>
        </div>
    </el-dialog>
</div>

<!--引入js-->
<script src="vue@2.7.14/vue.js"></script>
<script src="element-ui@2.15.13/js/index.js"></script>
<script src="axios@1.3.5/axios.min.js"></script>
<script src="main.js"></script>
<script src="common.js"></script>
</body>
</html>